<template>
  <div>
    <span>请选择你喜欢的专栏: </span>
    <div v-for="(item, index) in hobby" :key="index" class="box">
      <input type="checkbox" v-model="newHobby" :value="item">{{item}}
    </div>
    <!-- <input type="checkbox" v-model="hobby" value="科幻">科幻 -->
    <!-- <input type="checkbox" v-model="hobby" value="喜剧">喜剧 -->
    <!-- <input type="checkbox" v-model="hobby" value="动漫">动漫 -->
    <!-- <input type="checkbox" v-model="hobby" value="冒险">冒险 -->
    <!-- <input type="checkbox" v-model="hobby" value="科技">科技 -->
    <!-- <input type="checkbox" v-model="hobby" value="军事">军事 -->
    <!-- <input type="checkbox" v-model="hobby" value="娱乐">娱乐 -->
    <!-- <input type="checkbox" v-model="hobby" value="奇闻">奇闻 -->
    <ul>
      <li v-for="(item, index) in newHobby" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      hobby: ['科幻', '喜剧', '动漫', '冒险', '科技', '军事', '娱乐', '奇闻'],
      newHobby: []
    }
  },

  created () {

  },

  methods: {

  }
}
</script>

<style scoped lang='less'>
  .box {
    display: inline-block;
  }
</style>
